<template>
	<view class="car-count">
		<view class="car-list" v-for="(item,shopIndex) in carList" :key="shopIndex">
			<view class="list">
				<view class="btn" v-if="item.selected==true" @click.stop="selThis(shopIndex)">
					<uni-icons type="checkbox-filled" size="22" color="#498FFF"></uni-icons>
				</view>
				<view class="btn " v-else @click="selThis(shopIndex)">
					<uni-icons type="circle" size="22" color="#999"></uni-icons>
				</view>
				<image class="car-img" mode="aspectFill" :src="item.Img"></image>
				<view class="car-mes ">
					<view class="mes-box">
						<view class="name-box">
							<view class="g-name" v-if="coupons">{{item.CouponName || '--'}}</view>
							<view class="g-name" v-else>{{item.ProductName || '--'}}</view>
							<view class="g-icon" @click.stop="handleDel(item)">
								<u-button type="primary" text="核销"></u-button>
							</view>
						</view>
						<view class="gz-box" v-if="coupons"><text>{{item.Remark}}</text></view>
						<view class="gz-box" v-else><text>{{item.ProductAttributeName}}</text></view>
						<view class="g-time" v-if="item.ProductType == 13">
							入住-离店：{{ formatDateToYYYYMMDD(item.CheckInDate) }}-{{ formatDateToYYYYMMDD(item.CheckOutDate) }}
						</view>
						<view class="g-num" v-if="item.ProductType == 13">
							{{item.Num}}人
						</view>
						<view class="price-change-num clearfix">
							<view class="price" v-if="coupons">￥<text class="yj-price">{{item.CouponTemple.FullReduceAmount}}</text></view>
							<view class="price" v-else>￥<text class="yj-price">{{item.SalePrice}}</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="car-bottom-btn">
			<view class="all-sel-btn" @click="allSelBtn">
				<uni-icons v-if="allSel==true" type="checkbox-filled" size="22" color="#498FFF"></uni-icons>
				<uni-icons v-else type="circle" size="22" color="#999"></uni-icons>
				<text style="color: #111111;margin-left: 12rpx;">全选</text>
			</view>
			<view class="all-cost ">
				合计:<text class="icon">￥</text><text class="money">{{allAmount}}</text>
			</view>
			<view class="car-btn-box ">
				<view class="scan-btn" @click="openScanCode">
					扫一扫
				</view>
				<view class="js-btn " @click="jsCars">
					一键核销({{allNumber}})
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			carList: { //提示信息字体颜色
				type: Array,
				default () {
					return []
				}
			},
      coupons: {
        type: Boolean,
        default: false
      }
		},
		data() {
			return {
				maskTitle: '',
				allSel: true,
				allAmount: '0.00',
				allNumber: 0,
				delIds: '', //要删除的购物车id
				btnType: 0, //0删除  1结算
			};
		},
		mounted() {},
		created() {

		},
		onLoad() {
			console.log(this.carList)
		},
		computed: {

		},
		methods: {
			handleDel(item) {
				console.log('handleDel', item)
				const that = this
				uni.showModal({
					title: '提示',
					content: '是否核销当前商品?',
					confirmColor: '#498FFF',
					success: function(res) {
						if (res.confirm) {
							//核销
							let arr = [];
							arr.push(item)
							that.$emit('del', arr)
						} else if (res.cancel) {}
					}
				});
			},
			jsCars: function() {
				var that = this;
				that.btnType = 1;
				let ids = that.getCarIds();
				this.$emit('jsbtn', ids)
			},
			selThis: function(shopIndex) { //选择商品
				var that = this;
				let carList = that.carList;
				if (carList[shopIndex].selected == false) {
					carList[shopIndex].selected = true;
				} else {
					carList[shopIndex].selected = false;
				}
				that.setAllSel();
				that.$emit('selGoods', carList);
			},
			selShop: function(shopIndex) {
				var that = this;
				let carList = that.carList;
				if (carList[shopIndex].selected == false) {
					carList[shopIndex].selected = true;
					for (let i = 0; i < carList[shopIndex].glist.length; i++) {
						carList[shopIndex].glist[i].selected = true;
					}
				} else {
					carList[shopIndex].selected = false;
					for (let i = 0; i < carList[shopIndex].glist.length; i++) {
						carList[shopIndex].glist[i].selected = false;
					}
				}
				that.setAllSel();
				that.$emit('selShop', carList);
			},
			setAllSel: function() { //是否全选
				let shopNum = 0;
				for (let i = 0; i < this.carList.length; i++) {
					if (this.carList[i].selected == true) {
						shopNum = shopNum + 1;
					}
				}
				if (shopNum == this.carList.length && shopNum > 0) {
					this.allSel = true;
				} else {
					this.allSel = false;
				}
				this.getAllMount();
			},
			allSelBtn: function() { //全选
				var that = this;
				this.allSel = !this.allSel;
				var carList = that.carList;
				for (let i = 0; i < carList.length; i++) {
					if (this.allSel) {
						carList[i].selected = true;
					} else {
						carList[i].selected = false;
					}
				}
				that.$emit('allSelBtn', carList);
				that.getAllMount();
			},
			getAllMount: function() { //计算选中总价
				var that = this;
				let allPrice = 0;
				var selNum = 0;
				let carList = that.carList;
				for (let i = 0; i < carList.length; i++) {
					if (carList[i].selected == true) {
						selNum = selNum + (this.coupons? 1 : carList[i].Num);
						allPrice = allPrice + ((this.coupons? 1 : carList[i].Num) * (this.coupons?carList[i].CouponTemple.FullReduceAmount : carList[i].SalePrice));
					}
				}
				that.allNumber = selNum;
				that.allAmount = allPrice.toFixed(2);
			},
			getCarIds: function() { //获取要结算的商品
				var that = this;
				var carList = that.carList;
				var haveSel = [];
				for (let i = 0; i < carList.length; i++) {
					if (carList[i].selected == true) {
						haveSel.push(carList[i]);
					}
				}
				if (haveSel.length == 0) {
					uni.showToast({
						title: '请选择要核销的商品',
						icon: 'none'
					})
					return false;
				}
				let cartIds = haveSel;
				return cartIds;
			},
			openScanCode: function() {
				// 调用扫码API
				uni.scanCode({
					success: (res) => {
						// 扫码成功后的处理
						console.log('扫码结果：', res);
						// 根据需要进行后续处理，比如发送给父组件
						this.$emit('scanResult', res);
					},
					fail: (err) => {
						console.error('扫码失败：', err);
					}
				});
			},
			formatDateToYYYYMMDD(dateStr) {
				if (!dateStr) return '';
				// 只取日期部分
				const date = dateStr.split(' ')[0];
				return date.replace(/-/g, '');
			}
		}
	}
</script>

<style scoped lang="scss">
	.car-count {
		// min-height: 100vh;
		// background: $uni-bg-color-grey;
		// background-color: #e9e9e9;
		// padding-top: 10rpx;
	}
	.g-time{
		color: #666;
		font-size: 26rpx;
	}
	.g-num{
		padding-top: 10rpx;
		color: #666;
		font-size: 26rpx;
	}
	.shop-mes {
		padding: 20rpx 0 20rpx 0;


		.name-mes {
			display: flex;
		}

		.shop-name {
			padding-left: 24rpx;
			font-size: $uni-font-size-lg;
			font-weight: 700;
		}
	}

	.car-bottom-btn {
		//box-sizing: border-box;
		position: fixed;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		left: 0;
		bottom: 0;
		z-index: 6;
		//box-shadow: 0px -5px 10px -5px rgb(49,49,49);
		padding: 0 0 0 24rpx;
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;

		.all-sel-btn {
			height: 100%;
			width: 140rpx;
			display: flex;
			color: #8f8f8f;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}

		.all-cost {
			flex: 1;
			text-align: right;
			color: #111;
			margin-right: 20rpx;
			font-size: 24rpx;

			.icon {
				color: #498FFF;
				font-size: 24rpx;
			}

			.money {
				color: #498FFF;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.car-btn-box {
			width: 250rpx;
			height: 100%;
			display: flex;

			.scan-btn {
				width: 40%;
				height: 100%;
				text-align: center;
				color: #fff;
				background: #009688;
			}

			.js-btn {
				width: 60%;
				height: 100%;
				text-align: center;
				color: #fff;
				background: #498FFF;
			}
		}
	}

	.price-change-num {
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.car-list {
		width: 94%;
		margin-left: 3%;
		border-radius: 10rpx;
		padding: 0rpx 24rpx 24rpx 24rpx;
		box-sizing: border-box;
		position: relative;
		background: #FFFFFF;
		color: #111;
		margin-top: 20rpx;

		.btn {
			width: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-right: 10rpx;

			/deep/ .uni-icons {
				color: red;
			}
		}

		.list:last-child {
			border-bottom: none !important;

		}

		.list {
			width: 100%;
			padding: 20rpx 20rpx 20rpx 0;
			display: flex;
			// background: #f8f8f8;
			margin-bottom: 10rpx;
			margin-top: 10rpx;

			//border-bottom: 2rpx solid #e9e9e9;
			.car-img {
				//margin-left: 20rpx;
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				display: block;

			}

			.car-mes {
				flex: 1;
				margin-left: 20rpx;
			}
		}

		// .list:nth-child(1){
		// 	border-top-left-radius: 0;
		// 	border-top-right-radius: 0;
		// }
		// .list:nth-last-child(1){
		// 	margin: 0;
		// }

		.name-box {
			display: flex;
			width: 400rpx;
			overflow: hidden;

			.g-name {
				flex: 1;
				font-size: 28rpx;
				color: #111;
				word-wrap: break-word;
				@include overEllipsis;
				font-weight: 600;
				/* height: 38rpx; */
			}

			.g-icon {
				text-align: right;
				position: absolute;
				bottom: 2%;
				right: 2%;
			}
		}



		.mes-box {
			width: 100%;

			.price {
				color: #498FFF;
				font-weight: bold;
				font-size: 24rpx;
			}

			.yj-price {
				font-size: 36rpx;
			}
		}

		.gz-box {
			font-size: 26rpx;
			color: #999999;
			margin: 10rpx 0;
		}

		.price .num {
			color: #2a2a2a;
			font-size: 28rpx;
			font-weight: normal;
			float: right;
		}

	}
</style>